<template>
  <div class="app-container">
      <div class="tip">
          <el-descriptions title="通知模板支持的变量" :column="1">
              <el-descriptions-item label="TaskId">任务名称</el-descriptions-item>
              <el-descriptions-item label="Status">任务执行结果状态</el-descriptions-item>
              <el-descriptions-item label="Result">任务执行输出</el-descriptions-item>
          </el-descriptions>
          
      </div>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-row>
              <el-col :span="24">
                  <el-form-item label="URL" prop="url">
                      <el-input v-model="formData.url" placeholder="请输入URL" clearable :style="{ width: '80%' }">
                      </el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="24">
                  <el-form-item label="模版" prop="template">
                      <el-input v-model="formData.template" type="textarea" placeholder="请输入模版"
                          :autosize="{ minRows: 4, maxRows: 10 }" :style="{ width: '80%' }"></el-input>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row>
              <el-col :span="24">
                  <el-form-item size="large">
                      <el-button type="primary" @click="submitForm">提交</el-button>
                  </el-form-item>
              </el-col>
          </el-row>
      </el-form>
  </div>
</template>
<script>
import { getWebhook,updateWebhook } from "@/api/system/notice";
export default {
  components: {},
  props: [],
  data() {
      return {
          formData: {
              url: '',
              template: '',
          },
          rules: {
              url: [{
                  type: 'url',
                  required: true,
                  message: '请输入有效的通知URL',
                  trigger: 'blur'
              }],
              template: [{
                  required: true,
                  message: '请输入模版',
                  trigger: 'blur'
              }],
          },
      }
  },
  computed: {},
  watch: {},
  created() {
      this.getWebhook()
  },
  mounted() { },
  methods: {
      submitForm() {
          this.$refs['elForm'].validate(valid => {
              if (!valid) return
              updateWebhook(this.formData).then(response => {
                  this.$modal.msgSuccess("修改成功");
              })
          })
      },
      getWebhook() {
          getWebhook().then(response => {
              this.formData = response.data
              
          })
      },
  }
}

</script>
<style>
.tip {
  padding: 10px 20px;
  margin: 10px 100px;
  font-size: 17.5px;
  background-color: #f4f4f5;
  border-radius: 5px;

  tr {
      background-color: #f4f4f5;
  }
}
.tip>.el-descriptions>.el-descriptions__body{
  background-color: #f4f4f5 !important;
}


hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}
</style>
